<template>
    <div>
        <el-card class="box-card" v-for="career in careers" :key="career.id" style="margin-bottom: 15px;">
            <div slot="header" class="clearfix">
                <span>{{career.title}}</span>
                <router-link :to="{name:'career-edit',params:{career:career.id}}" style="float: right; padding: 3px 0">
                    查看
                </router-link>
            </div>
            <div>
                <p>所在步骤：{{career.pivot.step}}</p>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        props: {skillId: {type: Number, required: true}},
        data() {
            return {careers: []}
        },
        methods: {
            getCareers() {
                axios.get('skills/' + this.skillId + '/careers').then((response) => {
                    this.careers = response.data.data;
                })
            }
        },
        created() {
            this.getCareers();
        }
    }
</script>

<style scoped>

</style>